﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo showcases an Office-like ribbon.</title>
    <meta name="description" content="This demo showcases an Office-like ribbon."/>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <style type="text/css">
        .button {
            margin: 2px;
            margin-right: 0;
            font-size:11px;
         }

        .sectionSeparator {
            width: 1px;
            height: 105px;
            background-color: #eee;
            float: left;
            margin: 10px 5px 0 5px;
        }

        .bigTd {
            text-align: center;
            vertical-align: top;
            width: 50px;
        }

        .left {
            margin-left: 7px;
        }

        #clipBoardTable {
            height: 100%;
            border-collapse: separate;
            border-spacing: 0 0;
            float: left;
        }

        #jqxgrid {
            border-top: none;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        #jqxRibbon, #jqxRibbon div, #jqxRibbon li {
            font-size:11px;
        }
        #jqxRibbon li {
            line-height:16px;
        }
        #jqxRibbon, .jqx-ribbon-content-section-demoTheme {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .pasteText {
            font-size: 10px;
        }

        div#pasteButton {
            text-align: center;
        }

        #pasteDropDown .jqx-listitem-element-demoTheme {
            border: none;
            font-size: 10px;

        }

        #font {
            font-size: 11px;
            line-height: 17px;
        }

        #fontSize {
            line-height: 13px;
        }

        .jqx-dropdownlist-state-normal {
            background: transparent;
            border:none;
        }

        .jqx-button {
            background: transparent;
        }

        .separator {
            padding: 0 0 0 1px;
            height: 20px;
            border: solid 1px #fff;
            border-top: 0;
            border-bottom: 0;
            margin: 0 2px;
            width: 1px;
            display: inline-block;
            position: relative;
            background: #bfc3c7;
            background: linear-gradient(#f8f9fa, #bfc3c7, #f8f9fa);
        }

        .firstrow, .secondrow, .thirdrow {
            font-size: 0;
            padding: 0;
        }

        .firstrow .jqx-widget,
        .secondrow .jqx-widget,
        .thirdrow .jqx-widget {
            position: relative;
            display: inline-block;
            font-size: 10px;
        }

        .thirdrow .separator {
            margin: 0 2px;
            height: 14px;
        }

        .jqx-button-demoTheme span {
            margin-left: 2px;
        }

        .jqx-button {
            position: relative;
            height: 16px;
            padding: 2px;
            border: 1px solid transparent;
            line-height: 16px;
            text-align: left;
        }

        #fileItem {
            padding: 0px;
        }
        #fileItem {
            background: #006400;
            color: White !important;
            background-image: none;
            text-shadow: none;
        }

        #fileItem{
            background: #338333 !important;
            color: White !important;
            text-shadow: none;
        }

        #fileItem {
            background: #005000 !important;
            color: White !important;
            text-shadow: none;
        }

        .jqx-ribbon-content-section-demoTheme {
            background: #eaedf1;
            background: linear-gradient(#fff 40%, #eaedf1);
        }

        .jqx-button-demoTheme:hover {
            border-color: #f1ca58;
            box-shadow: 0 0 1px 1px #fff inset;
            background: #fde38a;
            background: linear-gradient(#fdeeb3, #fde38a, #fdefbb);
        }

        .jqx-button-demoTheme:active {
            border-color: #c2963d;
            background: #fff37f;
            background: linear-gradient(#ffe575, #fff37f);
        }

        .jqx-fill-state-hover-demoTheme,
        .jqx-fill-state-pressed-demoTheme {
            border-color: #c2963d;
            background: #fff37f;
            background: linear-gradient(#ffe575, #fff37f);
        }
        #fileItemButton {
            background: transparent;
            border: none;
            color: #fff;
         }

        .icon {
            background: url('../../images/ribbon-icons.png') no-repeat top left;
            width: 16px;
            height: 16px;
            display: inline-block;
            margin-right: 1px;
            vertical-align: middle;
        }
        .icon.closed_door { background-position: 0 0; }
        .icon.change-case-16 { background-position: -26px 0; }
        .icon.ClearFormattingImage { background-position: -52px 0; width: 17px; }
        .icon.close { background-position: -78px 0; }
        .icon.cut { background-position: -104px 0; }
        .icon.cut_red { background-position: -130px 0; }
        .icon.cut-icon-16 { background-position: -156px 0; }
        .icon.CutImage { background-position: -182px 0; }
        .icon.folder { background-position: -208px 0; }
        .icon.FontDialogImage { background-position: -234px 0; }
        .icon.fontsizedecrease16 { background-position: -260px 0; }
        .icon.fontsizeincrease16 { background-position: -286px 0; }
        .icon.FormatPainterImage { background-position: -312px 0; }
        .icon.page_copy { background-position: -338px 0; }
        .icon.page_paste { background-position: -364px 0; }
        .icon.page_white_paste { background-position: -390px 0; }
        .icon.paintcan { background-position: -416px 0; }
        .icon.paste_plain { background-position: -442px 0; }
        .icon.paste_word { background-position: -468px 0; }
        .icon.paste-24 { background-position: -494px 0; width: 24px; height: 24px; }
        .icon.paste-48 { background-position: -528px 0; width: 48px; height: 48px; }
        .icon.PasteImage { background-position: -586px 0; }
        .icon.PasteImageLarge { background-position: -612px 0; width: 32px; height: 32px; }
        .icon.PasteSpecialImage { background-position: -654px 0; }
        .icon.pencil { background-position: -680px 0; }
        .icon.SaveImage { background-position: -706px 0; }
        .icon.SaveSelectionImage { background-position: -732px 0; }
        .icon.ShowParagraphMarksImage { background-position: -758px 0; }
        .icon.SortHS { background-position: -784px 0; }
        .icon.spellcheck { background-position: -810px 0; }
        .icon.text_align_center { background-position: -836px 0; }
        .icon.text_align_justify { background-position: -862px 0; }
        .icon.text_align_left { background-position: -888px 0; }
        .icon.text_align_right { background-position: -914px 0; }
        .icon.text_bold { background-position: -940px 0; }
        .icon.text_indent { background-position: -966px 0; }
        .icon.text_indent_remove { background-position: -992px 0; }
        .icon.text_italic { background-position: -1018px 0; }
        .icon.text_linespacing { background-position: -1044px 0; }
        .icon.text_list_bullets { background-position: -1070px 0; }
        .icon.text_list_numbers { background-position: -1096px 0; }
        .icon.text_strikethrough { background-position: -1122px 0; }
        .icon.text_subscript { background-position: -1148px 0; }
        .icon.text_superscript { background-position: -1174px 0; }
        .icon.text_underline { background-position: -1200px 0; }

    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#fileItemButton').jqxDropDownButton({ arrowSize: 0, height: 26, dropDownWidth: 120, width: 50, theme: 'demoTheme' });
            $('#fileItemButton').jqxDropDownButton('setContent', '<span style="position: relative; line-height: 26px; margin-left:10px;">File</span>');
            $("#save, #saveAs, #open, #close, #exit").jqxButton({ theme: 'demoTheme' });

            // jqxRibbon code
            $("#jqxRibbon").jqxRibbon({
                width: 802,
                height: 131,
                animationType: "none",
                selectionMode: "click",
                position: "top",
                theme: "demoTheme",
                mode: "default",
                selectedIndex: 1,
                initContent: function (item) {
                    switch (item) {
                        case 0:

                            break;
                        case 1:
                            $("#subscript, #superscript, #bold, #italic, #underline, #strikethrough").jqxToggleButton({ theme: 'demoTheme' });
                            $("#shrinkFont, #copyButton, #cutButton, #growFont, #formatPainter, #clearFormatting, #alignLeft, #alignCenter, #alignRight, #alignJustify, #bulletList, #numberedList, #decreaseIndent, #increaseIndent, #Sort, #lineSpacing, #showHide").jqxButton({ theme: 'demoTheme' });
                            $("#cutButton").jqxTooltip({ position: "mouse", content: "Cut (Ctrl + X)" });
                            $("#copyButton").jqxTooltip({ position: "mouse", content: "Copy (Ctrl + C)" });
                            $("#subscript").jqxTooltip({ position: "mouse", content: "Subscript" });
                            $("#superscript").jqxTooltip({ position: "mouse", content: "Superscript" });
                            $("#bold").jqxTooltip({ position: "mouse", content: "Bold (Ctrl + B)" });
                            $("#italic").jqxTooltip({ position: "mouse", content: "Italic (Ctrl + I)" });
                            $("#underline").jqxTooltip({ position: "mouse", content: "Underline (Ctrl + U)" });
                            $("#strikethrough").jqxTooltip({ position: "mouse", content: "Strikethrough" });
                            $("#alignLeft").jqxTooltip({ position: "mouse", content: "Align Text Left (Ctrl + L)" });
                            $("#alignCenter").jqxTooltip({ position: "mouse", content: "Center (Ctrl + E)" });
                            $("#alignRight").jqxTooltip({ position: "mouse", content: "Align Text Right (Ctrl + R)" });
                            $("#alignJustify").jqxTooltip({ position: "mouse", content: "Justify (Ctrl + J)" });
                            $("#bulletList").jqxTooltip({ position: "mouse", content: "Bulleted List" });
                            $("#numberedList").jqxTooltip({ position: "mouse", content: "Numbered List" });
                            $("#decreaseIndent").jqxTooltip({ position: "mouse", content: "Decrease Indent" });
                            $("#increaseIndent").jqxTooltip({ position: "mouse", content: "Increase Indent" });
                            $("#Sort").jqxTooltip({ position: "mouse", content: "Sort Direction" });
                            $("#lineSpacing").jqxTooltip({ position: "mouse", content: "Line and Paragraph Spacing" });
                            $("#showHide").jqxTooltip({ position: "mouse", content: "Show/Hide special characters" });
                            $("#bucketColor").jqxTooltip({ position: "mouse", content: "Fill style", theme: 'demoTheme' });
                            $("#bucketColor").jqxDropDownButton({
                                width: 42,
                                height: 19,
                                theme: "demoTheme",
                                dropDownWidth: 180,
                                initContent: function () {
                                    $("#bucketColorPicker").jqxColorPicker({
                                        color: "000000",
                                        colorMode: 'hue',
                                        width: 180,
                                        theme: 'demoTheme',
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#bucketColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline-block; top: 2px"><div class="icon paintcan"></div><span id="bucketColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span>');



                            $("#font").jqxDropDownList({
                                source: [
                                    "<span style='font-family: Courier New;'>Courier New</span>",
                                    "<span style='font-family: Times New Roman;'>Times New Roman</span>",
                                    "<span style='font-family: Arial;'>Arial</span>"
                                ],
                                width: 120,
                                height: 21,
                                theme: 'demoTheme',
                                autoDropDownHeight: true,
                                selectedIndex: 1
                            });

                            $("#fontSize").jqxDropDownList({
                                source: [8, 9, 10, 11, 12, 14, 18, 20, 22, 24],
                                theme: 'demoTheme',
                                renderer: function (index, label, value) {
                                    return '<span style="font-size:' + value + 'px;">' + value + '</span>';
                                },
                                width: 70, height: 21, autoDropDownHeight: true, selectedIndex: 2
                            });
                            $("#subscript").on('click', function () {
                                if ($('#superscript').jqxToggleButton('toggled')) {
                                    $('#superscript').jqxToggleButton('toggled', false)
                                }
                            });
                            $("#superscript").on('click', function () {
                                if ($('#subscript').jqxToggleButton('toggled')) {
                                    $('#subscript').jqxToggleButton('toggled', false)
                                }
                            });
                            $("#changeCase").jqxDropDownList({
                                source: ['Sentence Case', 'lowercase', 'UPPERCASE', 'Capitalize Each Word'],
                                theme: 'demoTheme',
                                selectionRenderer: function (object, index, label) {
                                    return '<div class="icon change-case-16" style="top:3px;  position:relative"></div>';
                                },
                                dropDownWidth: 150,
                                autoDropDownHeight: true, selectedIndex: 0, width: 40

                            });

                            $("#fontColor").jqxDropDownButton({
                                width: 100,
                                theme: 'demoTheme',
                                dropDownWidth: 180,
                                height: 21, initContent: function () {
                                    $("#fontColorPicker").jqxColorPicker({
                                        color: "000000",
                                        colorMode: 'hue',
                                        theme: 'demoTheme',
                                        width: 180,
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#fontColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon FontDialogImage"></div><span id="fontColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#000"></span></span><span style="position:relative; display: inline; top:3px">Font Color</span>');

                            $("#highlightColor").jqxDropDownButton({
                                width: 130,
                                dropDownWidth: 180,
                                theme: 'demoTheme',
                                height: 21,
                                initContent: function () {
                                    $("#highlightColorPicker").jqxColorPicker({
                                        color: "FF0000",
                                        theme: 'demoTheme',
                                        colorMode: 'hue',
                                        width: 180,
                                        height: 180
                                    }).on('colorchange', function (event) {
                                        $("#highlightColorPreview").css('background', '#' + event.args.color.hex);
                                    });
                                }
                            }).jqxDropDownButton('setContent', '<span style="position:relative; display:inline; top: 2px"><div class="icon pencil"></div><span id="highlightColorPreview" style="display: block; position:absolute;  height: 3px; width: 16px; background:#F00"></span></span><span style="position:relative; display: inline; top:3px">Highlight Color</span>');


                            var pasteData = [
                                { label: 'Paste', imageClass: 'icon page_paste' },
                                { label: 'Paste Special', imageClass: 'icon paste_plain' },
                                { label: 'Paste text', imageClass: 'icon paste_word' },
                                { label: 'Paste link', imageClass: 'icon PasteImage' }
                            ];
                            $('#pasteButton').jqxButton({
                                width: 35,
                                theme: 'demoTheme',
                                height: 56
                            }).on('click', function (event) {
                                var text = $(this).find('.pasteText').html();
                                console.log(text + ' clicked');
                            }).on('mousedown', function (event) {
                                event.preventDefault();
                            });
                            $("#pasteDropDown").jqxDropDownList({
                                source: pasteData,
                                width: 22,
                                height: 10,
                                theme: 'demoTheme',
                                animationType: 'none',
                                dropDownWidth: '110px',
                                autoDropDownHeight: true,
                                renderer: function (index, label, value) {
                                    var imgUrl = pasteData[index].imgUrl;
                                    var labelEl = '<span style="font-size: 10px">' + label + '</span>';
                                    var icon = '<span class="' + pasteData[index].imageClass + '" style=""></span>';
                                    return '<span>' + icon + labelEl + '</span>';
                                },
                                selectionRenderer: function (object, index, label) {
                                    return "";
                                },
                                selectedIndex: 0
                            }).on('select', function (event) {
                                var index = event.args.index;
                                var icon = '<span class="' + pasteData[index].imageClass + '" style="zoom: 1.5"></span>';
                                $('#pasteButton').html(icon + '<span class="pasteText">' + pasteData[index].label + '</span>');
                                $('#pasteButton').jqxButton('render');
                            });
                            break;
                        case 2:
                            $("#help, #about, #update").jqxButton({ width: 26, height: 26, theme: 'demoTheme' });
                            break;
                    }
                }
            });

            $('#jqxRibbon').jqxRibbon('disableAt', 0);

            // jqxGrid code
            // renderer for grid cells.
            var numberrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
            };
            // create Grid datafields and columns arrays.
            var datafields = [];
            var columns = [];
            for (var i = 0; i < 26; i++) {
                var text = String.fromCharCode(65 + i);
                if (i == 0) {
                    var cssclass = 'jqx-widget-header';
                    if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                    columns[columns.length] = {
                        pinned: true,
                        exportable: false,
                        text: "",
                        columntype: 'number',
                        cellclassname: cssclass,
                        cellsrenderer: numberrenderer
                    };
                }
                datafields[datafields.length] = { name: text };
                columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };
            }
            var source =
            {
                unboundmode: true,
                totalrecords: 100,
                datafields: datafields,
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                    {
                        width: 800,
                        source: dataAdapter,
                        editable: true,
                        columnsresize: true,
                        selectionmode: 'multiplecellsadvanced',
                        columns: columns
                    });
        });
    </script>
</head>
<body>
<div id="jqxRibbon">
    <ul>
        <li id="fileItem">
            <div id="fileItemButton">
                <div style="height:103px;">
                <ul style="list-style-type: none; margin:0px; padding: 3px;">
                <li>
                    <div id="save" class="button">
                        <div class='icon SaveImage'></div> Save
                    </div>
                </li>
                <li>
                    <div id="saveAs" class="button">
                        <div class='icon SaveSelectionImage'></div> Save As
                    </div>
                </li>
                <li>
                    <div id="open" class="button">
                        <div class='icon folder'></div> Open
                    </div>
                </li>
                <li>
                    <div id="close" class="button">
                        <div class='icon close'></div> Close
                    </div>
                </li>

            </ul>
</div>
            </div>
        </li>
        <li>Home</li>
        <li>Help</li>
    </ul>
    <div>
        <div style="overflow:hidden;">

        </div>
        <div style="overflow:hidden;">
            <table class="buttonHolderTable" id="clipBoardTable">
                <tr>
                    <td rowspan="3" style="text-align: center; vertical-align: initial; height: 70px; font-size:10px">
                        <div id="paste" style="width: 50px;">
                            <div id="pasteButton"><span class="icon page_paste" style="zoom:1.5"></span><span class="pasteText">Paste</span>
                            </div>
                            <div id="pasteDropDown" style="margin-top: -3px; margin-left:10px;"></div>
                        </div>
                    </td>
                    <td class="firstrow" rowspan="1">
                        <div id="cutButton"><div class='icon cut_red'></div>
                            <span class="cutText">Cut</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="secondrow">
                        <div id="copyButton"><div class='icon page_copy'></div>
                            <span class="copyText">Copy</span></div>
                    </td>
                </tr>
                <tr>
                    <td class="thirdrow">
                        <div id="formatPainter"><div class='icon FormatPainterImage'></div>
                            <span class="formatPainter">Format Painter</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="font-size: 9px; text-align: center; top: -3px; position: relative;">
                        Clipboard
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
            <table class="buttonHolderTable" style="float: left;">
                <tr>
                    <td colspan="4">
                        <div id="font">
                        </div>
                    </td>
                    <td>
                        <div id="fontSize">
                        </div>
                    </td>
                    <td>
                        <div id="growFont"><div class='icon fontsizeincrease16'></div></div>
                    </td>
                    <td>
                        <div id="shrinkFont"><div class='icon fontsizedecrease16'></div></div>
                    </td>
                    <td>
                        <div id="clearFormatting"><div class='icon ClearFormattingImage'></div></div>
                    </td>
                    <td>
                        <div id="changeCase"></div>
                    </td>
                </tr>
                <tr class="secondrow">
                    <td colspan="8">
                        <div id="fontColor">
                            <div style="padding: 3px;">
                                <div id="fontColorPicker">
                                </div>
                            </div>
                        </div>
                        <div class="separator"></div>
                        <div id="highlightColor">
                            <div style="padding: 3px;">
                                <div id="highlightColorPicker">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="thirdrow">
                    <td colspan="8">
                        <div id="superscript">
                            <div class='icon text_superscript'></div>
                        </div>
                        <div id="subscript">
                            <div class='icon text_subscript'></div>
                        </div>
                        <div class="separator" style="top: 3px;"></div>
                        <div id="bold">
                            <div class='icon text_bold'></div>
                        </div>
                        <div id="italic">
                            <div class='icon text_italic'></div>
                        </div>
                        <div id="underline">
                            <div class='icon text_underline'></div>
                        </div>
                        <div id="strikethrough">
                            <div class='icon text_strikethrough'></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="9" style="font-size: 9px; text-align: center;">
                        Font
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
            <table class="buttonHolderTable" style="float: left;">
                <tr class="firstrow">
                    <td colspan="8">
                        <div id="bulletList">
                            <div class='icon text_list_bullets'></div>
                        </div>
                        <div id="numberedList">
                            <div class='icon text_list_numbers'></div>
                        </div>
                        <div id="decreaseIndent">
                            <div class='icon text_indent'></div>
                        </div>
                        <div id="increaseIndent">
                            <div class='icon text_indent_remove'></div>
                        </div>
                        <div id="Sort">
                            <div class='icon SortHS'></div>
                        </div>
                        <div id="bucketColor" style="vertical-align: top;">
                            <div style="padding: 3px;">
                                <div id="bucketColorPicker">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr class="secondrow">
                    <td colspan="8">
                        <div id="alignLeft">
                            <div class='icon text_align_left'></div>
                        </div>
                        <div id="alignCenter">
                            <div class='icon text_align_center'></div>
                        </div>
                        <div id="alignRight">
                            <div class='icon text_align_right'></div>
                        </div>
                        <div id="alignJustify">
                            <div class='icon text_align_justify'></div>
                        </div>
                        <div class="separator" style="top:5px; height: 15px;"></div>
                        <div id="lineSpacing">
                            <div class='icon text_linespacing'></div>
                        </div>
                        <div id="showHide">
                            <div class='icon ShowParagraphMarksImage'></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height: 43px; text-align: center; vertical-align: bottom; font-size:9px;">
                        Alignment
                    </td>
                </tr>
            </table>
            <div class="sectionSeparator">
            </div>
        </div>
        <div style="overflow:hidden;">
            <table class="buttonHolderTable" style="height: 100%;">
                <tr>
                    <td class="bigTd">
                        <div id="help" class="button left">
                            <img src="../../images/help-26.png"/>
                        </div>
                        Help
                    </td>
                    <td class="bigTd">
                        <div id="about" class="button left">
                            <img src="../../images/about-26.png"/>
                        </div>
                        About
                    </td>
                    <td class="bigTd">
                        <div id="update" class="button left">
                            <img src="../../images/downloading_updates-26.png"/>
                        </div>
                        Update
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="jqxgrid">
</div>
</body>
</html>
